<template>
  <div class="state-change-item">
    <el-form :rules="rules" :model='formData' ref='signalForm' class="state-form">
      <el-form-item class="form-item" prop="metaModelId" label="选择信号">
        <el-popover popper-class='' placement="top" width="262" :value="showSignalDetail" trigger="manual">
          <div>signalKey: {{ signalItem.signalKey }}</div>
          <div>signalId: {{ signalItem.signalId }}</div>
          <div>signalName: {{ signalItem.signalName }}</div>
        <div v-if="signalItem.interfaceBid">interfaceBid: {{ signalItem.interfaceBid }}</div>
        <div v-if="signalItem.serviceBid">serviceBid: {{ signalItem.serviceBid }}</div>
          <div slot="reference" @mouseenter="showSignalDetail = !!signalItem.signalKey" @mouseleave='showSignalDetail = false' @click="showSignalDetail = false">
            <treeselect v-model="formData.metaModelId" :options="signalListOptions" :normalizer="normalizer" @select="signalChange" :disableFuzzyMatching="true" :clearable="false" placeholder="请选择信号" :disable-branch-nodes="true" :maxHeight='240'/>
          </div>
        </el-popover>
      </el-form-item>
      <div class="item-setting">
        <div class="text-info">从</div>
        <div class="form-info">
          <el-form-item class="form-item" prop="stateChange.fromOperator">
            <el-select v-model="formData.stateChange.fromOperator" placeholder="请选择" class="item-operator">
              <el-option v-for="item in signalItem.symbols" :label="item.name" :value="item.key" :key="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-popover v-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Radio'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-radio-group v-model="formData.stateChange.fromValue">
              <el-radio v-for="item in signalItem.values" :label="item.key" :key="item.key" class="singal-value-radio-item">{{ item.name }}</el-radio>
            </el-radio-group>
            <el-form-item slot="reference" class="form-item" prop="stateChange.fromValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.fromValue) && signalItem.values.find(item => item.key === formData.stateChange.fromValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'RadioButton'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-radio-group v-model="formData.stateChange.fromValue" :fill='componentsProps[paramKey].radioGroup_fill'>
              <el-radio-button v-for="item in signalItem.values" :label="item.key" :key="item.key">{{ item.name }}</el-radio-button>
            </el-radio-group>
            <el-form-item slot="reference" class="form-item" prop="stateChange.fromValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.fromValue) && signalItem.values.find(item => item.key === formData.stateChange.fromValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Slider'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-slider
              v-model="formData.stateChange.fromValue"
              :min='signalItem.spec.min !== undefined ? signalItem.spec.min : componentsProps[paramKey].min'
              :max='signalItem.spec.max !== undefined ? signalItem.spec.max : componentsProps[paramKey].max'
              :show-stops='componentsProps[paramKey].showStops'
              :step='componentsProps[paramKey].step'></el-slider>
            <el-form-item slot="reference" class="form-item" prop="stateChange.fromValue" :rules="rules.inputValue">
              <el-input :value="formData.stateChange.fromValue" ref="signalInput"></el-input>
              <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
                <svg-icon slot="reference" icon-class="说明"/>
              </el-popover>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Switch'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-switch
              v-model="formData.stateChange.fromValue"
              :active-text="signalItem.values.find(item => item.key === 'true').name"
              :inactive-text="signalItem.values.find(item => item.key === 'false').name"
              :active-value='componentsProps[paramKey].activeValue'
              :inactive-value='componentsProps[paramKey].inactiveValue'
              :active-color='componentsProps[paramKey].activeColor'
              :inactive-color='componentsProps[paramKey].inactiveColor'>
            </el-switch>
            <el-form-item slot="reference" class="form-item" prop="stateChange.fromValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.fromValue) && signalItem.values.find(item => item.key === formData.stateChange.fromValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-form-item v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'ColorPicker'" class="form-item" prop="stateChange.fromValue" :rules="rules.selectValue">
            <el-color-picker v-model="formData.stateChange.fromValue"></el-color-picker>
          </el-form-item>
          <el-form-item v-else-if="signalItem.values.length > 0" class="form-item" prop="stateChange.fromValue" :rules="rules.selectValue">
            <el-select v-model="formData.stateChange.fromValue" :filterable='componentsProps[paramKey] ? componentsProps[paramKey].filterable : undefined'>
              <el-option v-for="item in signalItem.values" :label="item.name" :value="item.key" :key="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else-if='signalItem.dataType === "String"' class="form-item" prop="stateChange.fromValue" :rules="rules.inputValue">
            <el-input v-model="formData.stateChange.fromValue" class="input-number" placeholder="请输入"></el-input>
            <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
              <svg-icon slot="reference" icon-class="说明"/>
            </el-popover>
          </el-form-item>
          <el-form-item v-else class="form-item" prop="stateChange.fromValue" :rules="rules.inputValue">
            <el-input-number v-model="formData.stateChange.fromValue" :controls='false' :min='signalItem.spec.min' :max='signalItem.spec.max' :precision="componentsProps[paramKey] ? componentsProps[paramKey].precision : undefined" class="input-number" placeholder="请输入"></el-input-number>
            <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
              <svg-icon slot="reference" icon-class="说明"/>
            </el-popover>
          </el-form-item>
        </div>
        <div class="text-info">变为</div>
        <div class="form-info">
          <el-form-item class="form-item" prop="stateChange.toOperator">
            <el-select v-model="formData.stateChange.toOperator" placeholder="请选择" class="item-operator">
              <el-option v-for="item in signalItem.symbols" :label="item.name" :value="item.key" :key="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-popover v-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Radio'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-radio-group v-model="formData.stateChange.toValue">
              <el-radio v-for="item in signalItem.values" :label="item.key" :key="item.key" class="singal-value-radio-item">{{ item.name }}</el-radio>
            </el-radio-group>
            <el-form-item slot="reference" class="form-item" prop="stateChange.toValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.toValue) && signalItem.values.find(item => item.key === formData.stateChange.toValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'RadioButton'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-radio-group v-model="formData.stateChange.toValue" :fill='componentsProps[paramKey].radioGroup_fill'>
              <el-radio-button v-for="item in signalItem.values" :label="item.key" :key="item.key">{{ item.name }}</el-radio-button>
            </el-radio-group>
            <el-form-item slot="reference" class="form-item" prop="stateChange.toValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.toValue) && signalItem.values.find(item => item.key === formData.stateChange.toValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Slider'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-slider
              v-model="formData.stateChange.toValue"
              :min='signalItem.spec.min !== undefined ? signalItem.spec.min : componentsProps[paramKey].min'
              :max='signalItem.spec.max !== undefined ? signalItem.spec.max : componentsProps[paramKey].max'
              :show-stops='componentsProps[paramKey].showStops'
              :step='componentsProps[paramKey].step'></el-slider>
            <el-form-item slot="reference" class="form-item" prop="stateChange.toValue" :rules="rules.inputValue">
              <el-input :value="formData.stateChange.toValue" ref="signalInput"></el-input>
              <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
                <svg-icon slot="reference" icon-class="说明"/>
              </el-popover>
            </el-form-item>
          </el-popover>
          <el-popover v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'Switch'" popper-class='signal-popper' placement="bottom" width="262" trigger="click">
            <el-switch
              v-model="formData.stateChange.toValue"
              :active-text="signalItem.values.find(item => item.key === 'true').name"
              :inactive-text="signalItem.values.find(item => item.key === 'false').name"
              :active-value='componentsProps[paramKey].activeValue'
              :inactive-value='componentsProps[paramKey].inactiveValue'
              :active-color='componentsProps[paramKey].activeColor'
              :inactive-color='componentsProps[paramKey].inactiveColor'>
            </el-switch>
            <el-form-item slot="reference" class="form-item" prop="stateChange.toValue" :rules="rules.selectValue">
              <el-input :value="signalItem.values.find(item => item.key === formData.stateChange.toValue) && signalItem.values.find(item => item.key === formData.stateChange.toValue).name" ref="signalInput"></el-input>
            </el-form-item>
          </el-popover>
          <el-form-item v-else-if="componentsProps[paramKey] && componentsProps[paramKey].widgetClassName === 'ColorPicker'" class="form-item" prop="stateChange.toValue" :rules="rules.selectValue">
            <el-color-picker v-model="formData.stateChange.toValue"></el-color-picker>
          </el-form-item>
          <el-form-item v-else-if="signalItem.values.length > 0" class="form-item" prop="stateChange.toValue" :rules="rules.selectValue">
            <el-select v-model="formData.stateChange.toValue" :filterable='componentsProps[paramKey] ? componentsProps[paramKey].filterable : undefined'>
              <el-option v-for="item in signalItem.values" :label="item.name" :value="item.key" :key="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else-if='signalItem.dataType === "String"' class="form-item" prop="value" :rules="rules.inputValue">
            <el-input v-model="formData.value" class="input-number" placeholder="请输入"></el-input>
            <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
              <svg-icon slot="reference" icon-class="说明"/>
            </el-popover>
          </el-form-item>
          <el-form-item v-else class="form-item" prop="stateChange.toValue" :rules="rules.inputValue">
            <el-input-number v-model="formData.stateChange.toValue" :controls='false' :min='signalItem.spec.min' :max='signalItem.spec.max' :precision="componentsProps[paramKey] ? componentsProps[paramKey].precision : undefined" class="input-number" placeholder="请输入"></el-input-number>
            <el-popover v-if="signalItem.spec.discreteStr" placement="bottom-end" width="200" trigger="hover" :content="signalItem.spec.discreteStr" class="input-description" popper-class='desc-poper'>
              <svg-icon slot="reference" icon-class="说明"/>
            </el-popover>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import Platform from '@/utils/platform'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import SceneNodeApi from '@/api/ruleNode/sceneNode'
import { adapterSignalItemData, generatorTreeSelectData, formatComponentsProp } from '../stateChangeNode.util'

export default {
  name: 'SignalListItem',
  components: {
    Treeselect
  },
  data() {
    return {
      formData: {
        signalName: '',
        signalId: '',
        signalKey: '',
        interfaceBid: '',
        serviceBid: '',
        optionalFlag: '',
        offset: '',
        resolution: '',
        metaModelId: null,
        stateChange: {
          fromOperator: '',
          fromValue: undefined,
          toOperator: '',
          toValue: undefined
        }
      },
      componentsProps: {},
      signalItem: {
        symbols: null,
        values: [],
        dataType: '',
        spec: {}
      },
      rules: {
        metaModelId: [{ required: true, message: ' ', trigger: 'change' }],
        inputValue: [{ required: true, message: '请输入信号值', trigger: 'blur' }],
        selectValue: [{ required: true, message: '请选择信号值', trigger: 'change' }],
        stateChange: {
          fromOperator: [{ required: true, message: '请选择操作符', trigger: 'change' }],
          toOperator: [{ required: true, message: '请选择操作符', trigger: 'change' }]
        }
      },
      showSignalDetail: false
    }
  },
  props: {
    signalData: {
      required: true
    },
    signalListData: {
      required: true
    },
    signalListOptions: {
      required: true
    }
  },
  async mounted() {
    if (this.signalData.metaModelId) {
      this.formData = deepClone(this.signalData)
      this.formData.metaModelId = generatorTreeSelectData(this.signalData)
      this.getSignalItem(this.formData.metaModelId)
    }
  },
  computed: {
    paramKey() {
      return this.signalItem.signalKey?.split('&_&').at(-1)
    }
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          this.$emit('change', deepClone(this.formData))
        }
      },
      deep: true
    }
  },
  methods: {
    signalChange(signalKey) {
      this.formData.stateChange = {
        fromOperator: '',
        fromValue: undefined,
        toOperator: '',
        toValue: undefined
      }
      this.getSignalItem(signalKey.value)
      this.$nextTick(() => { this.$refs.signalForm.clearValidate() })
    },
    getSignalItem(signalKey) {
      this.showSignalDetail = false
      const signalItem = this.signalListData.signals.find(el => el.id === signalKey)
      signalItem && (this.signalItem = adapterSignalItemData(signalItem))
      this.formData.signalKey = this.signalItem.signalKey
      this.formData.signalId = this.signalItem.signalId
      this.formData.interfaceBid = this.signalItem.interfaceBid
      this.formData.serviceBid = this.signalItem.serviceBid
      this.formData.optionalFlag = this.signalItem.optionalFlag
      this.formData.signalName = this.signalItem.signalName
      this.formData.offset = this.signalItem.spec.offset
      this.formData.resolution = this.signalItem.spec.resolution
      this.getS2_2()
    },
    // 获取S2-2对应信号的小组件配置信息
    async getS2_2() {
      const param = {
        id: this.signalItem.signalId,
        terminalType: 0,
        metamodelParams: [{
          paramDataType: this.signalItem.dataType, paramKey: this.paramKey
        }]
      }
    },
    normalizer(node) {
      const rtn = {
        id: node.id || node.value,
        label: node.name || node.label
      }
      if (node.children && node.children.length > 0) {
        rtn.children = node.children
      } else {
        delete node.children
      }
      return rtn
    },
    deleteHandler() {
      this.$emit('delete')
    }
  }
}
</script>

<style lang="scss">
.state-change-item .state-form {
  overflow: visible;
  .form-item{
    margin-bottom: 8px;
    .input-number{
      width: 100%;
      .el-input__inner{
        text-align: left;
      }
    }
    .item-operator{
      .el-input, .el-input.is-focus{
        .el-input__inner, .el-input__inner:hover, .el-input__inner:focus{
          border-right: none;
          transition: none;
          border-color: #e0e0e0;
        }
      }
    }
    &.is-error{
      .item-operator .el-input__inner{
        border-right: 1px solid #E15863;
        border-color: #E15863;
      }
    }
    .input-description{
      position: absolute;
      right: 4px;
      font-size: 16px;
      display: block;
      top: 0;
      line-height: 32px;
      color: #a3a3a3;
    }
  }
  .choose-signal{
    width:100%;
  }
  .tool-bar {
    float: right;
    height: 32px;
    .signal-open{
      width: 16px;
      height: 32px;
      cursor: pointer;
      margin-right: 2px;
    }
  }
  .item-setting{
    background-color: #f2f3f5;
    padding: 16px;
    display: flex;
    margin-bottom: 16px;
    .text-info{
      line-height: 32px;
    }
    .form-info{
      display: flex;
      margin: 0 8px;
      .form-item{
        width: 100px;
        margin-bottom: 0;
        &:nth-child(2){
          width: 140px;
        }
      }
    }
  }
}
</style>
